<html>
    <head>
        <title>Login</title>
        <script language="Javascript" src="FormValidator.js" 
            type="text/javascript"></script>
        <script language="Javascript" src="ValidationItem-Common.js"
            type="text/javascript"></script>
        
        <script language="Javascript" type="text/javascript">
        
            // Create instance of the form validator
            var validator = new FormValidator();
            validator.setErrorIntroText("Please correct the following:\n\n");
            
            // Create validation items
            var txtUsername = new ValidationItemEmailAddress("txtUsername", 
                "valid", "invalid", "Username is not a valid e-mail address");
            
            var txtPassword = new ValidationItemEmpty("txtPassword", "valid", 
                "invalid", "Password cannot be empty");
            
            // Add validation items to validator
            validator.addValidationItem(txtUsername);
            validator.addValidationItem(txtPassword);
            
            function validateForm() {
                return validator.validate();
            }
        </script>
        <style type="">
            .invalid {
                background: red;
                color: white;
            }

            .valid {
                background: white;
                color: black;
            }
        </style>
    </head>
    <body>
        <h1>Login</h1>
        
        <form onsubmit="return validateForm()" action="">
            <table>
                <tr>
                    <td>Username:</td>
                    <td>
                        <input type="text" name="txtUsername" id="txtUsername"
                            value="" />
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input type="password" name="txtPassword" 
                            id="txtPassword" value="" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Login" /></td>
                </tr>
            </table>
        </form>
    </body>
</html>
